<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		body{
			display: flex;
			justify-content: center;
			background: linear-gradient(to right,#fee0a2,#f98d92,#ce65af,#8e51d3);
		}
		.menu{
			width: 70%;
			height: 58px;
			margin: 100px,auto;
		}
		.menu li{
			background: linear-gradient(#292929,#252525);
			border-bottom: 2px solid #181818;
			border-top: 2px solid #303030;
			min-width: 160px;
		}
		.menu a{
			display: block;
			color: #808080;
			font-family: 'Lucida Console';
			font-size: 18px;
			line-height: 54px;
			padding: 0 25px;
			text-decoration: none;
			text-transform: uppercase;
			border-left: 3px solid rgba(0,0,0,0);
		}
		.menu > li{
			position: relative;
			float: left;
		}
		.menu > li:first-child{
			border-radius: 5px 0 0;
		}
		.submenu{
			max-height: 0;
			position: absolute;
			left: 0;
			top: 100%;
			z-index: 0;
		}
		.submenu li{
			opacity: 0;
			transform: rotateY(90deg);
			transition:
			opacity .4s,transform .5s;
		}
		.menu li:hover{
			background-color: #1c1c1c;
			border-bottom: 2px solid #222;
			border-top: 2px solid #1b1b1b;
		}
		.menu li:hover>a{
			border-radius: 5px 0 0 0;
			border-left: 3px solid #c430ab;
			color: #c4302b;
		}
		.menu .submenu li:hover a{
			border-left: 3px solid #454545;
			border-radius: 0;
			color: #fff;
		}
		.menu > li:hover .submenu{
			min-height: 700px;
			z-index: 10;
		}
		.menu > li:hover .submenu li{
			transform: rotateY(0deg);
			opacity: 1;
		}
	</style>
	<body>
		<ul class="menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Menu 1</a>
				<ul class="submenu">
					<li><a href="#">submenu a</a></li>
					<li><a href="#">submenu b</a></li>
					<li><a href="#">submenu c</a></li>
					<li><a href="#">submenu d</a></li>
					<li><a href="#">submenu e</a></li>
				</ul>
			</li>
			<li><a href="#">Menu 2</a>
				<ul class="submenu">
					<li><a href="#">submenu a</a></li>
					<li><a href="#">submenu b</a></li>
					<li><a href="#">submenu c</a></li>
					<li><a href="#">submenu d</a></li>
					<li><a href="#">submenu e</a></li>
				</ul>
			</li>
			<li><a href="#">Menu 3</a>
				<ul class="submenu">
					<li><a href="#">submenu a</a></li>
					<li><a href="#">submenu b</a></li>
					<li><a href="#">submenu c</a></li>
					<li><a href="#">submenu d</a></li>
					<li><a href="#">submenu e</a></li>
				</ul>
			</li>
			<li><a href="#">more</a></li>
		</ul>
	</body>
</html>